﻿
@{
    ViewData["Title"] = "Index";
    Layout = "~/Areas/Admin/Views/Shared/_VueLayout.cshtml";
}

@section header{
   

}
<div id="app" v-cloak>
    <div id='wrapper'>



        <div class="container">
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <i class="el-icon-s-order"></i>  审计日志列表
                </div>

                <div class="handle-box">
                    <el-form :inline="true" :model="queryModel">
                        <el-form-item label="控制器">
                            <el-input v-model="queryModel.SController" placeholder="控制器"></el-input>
                        </el-form-item>
                        <el-form-item label="方法">
                            <el-input v-model="queryModel.SAction" placeholder="方法"></el-input>
                        </el-form-item>
                        <el-form-item label="账户">
                            <el-input v-model="queryModel.LoginName" placeholder="账户"></el-input>
                        </el-form-item>
                        <el-form-item label="执行时间">
                            <el-col :span="11">
                                <el-date-picker type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择时间" v-model="queryModel.time_min"
                                                style="width: 100%;"></el-date-picker>
                            </el-col>
                            <el-col class="line" :span="1">-</el-col>
                            <el-col :span="11">
                                <el-date-picker type='datetime' value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择时间" v-model="queryModel.time_max"
                                                style="width: 100%;"></el-date-picker>
                            </el-col>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" v-on:click="handleSearch">查询</el-button>
                            <el-button type="danger" icon="el-icon-delete" class="handle-del mr10" v-on:click="handleDelAllSelection">批量删除</el-button>

                        </el-form-item>
                    </el-form>

                </div>

                <el-table v-loading="loading"  element-loading-text="数据加载中" v-on:selection-change="handleSelectionChange" :data="tableData" style="width: 100%;margin-bottom: 20px;"
                          row-key="id" border>
                    <el-table-column type="selection" width="55">
                    </el-table-column>
                    <el-table-column prop="loginName" label="账户" sortable width="180">
                    </el-table-column>
                    <el-table-column prop="area" label="模块" sortable width="180">
                    </el-table-column>
                    <el-table-column prop="controller" label="控制器">
                    </el-table-column>
                    <el-table-column prop="action" label="方法">

                    </el-table-column>
                    <el-table-column prop="ip" label="IP">
                    </el-table-column>
                    <el-table-column prop="executionTime" label="执行时间">
                    </el-table-column>
                    <el-table-column prop="executionDuration" label="执行耗时（ms）">
                    </el-table-column>

                    <el-table-column label="操作" width="180" align="center">
                        <template slot-scope="scope">
                            <el-button type="text" icon="el-icon-edit" v-on:click="handleView(scope.$index, scope.row)">查看</el-button>
                            <el-button type="text" icon="el-icon-delete" class="red" v-on:click="handleDelete(scope.$index, scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>


                <div class="pagination" style="text-align: center;">
                    <el-pagination background v-on:current-change="handleCurrentChange" v-on:size-change='handleSizeChange' :current-page.sync="queryModel.pageModel.page" :page-sizes="[10, 20, 50, 80]"
                                   :page-size.sync="queryModel.pageModel.rows" layout="total,sizes, prev, pager, next" :total="total">
                    </el-pagination>

                </div>

                </el-card>
        </div>



        <!-- 弹出框 -->
        <el-dialog title="详细查看" :visible.sync="viewVisible" width="50%">
            <el-form :model="viewModel" label-width="70px">
                <el-form-item label="模块">
                    <el-input v-model="viewModel.area"></el-input>
                </el-form-item>
                <el-form-item label="控制器">
                    <el-input v-model="viewModel.controller"></el-input>

                </el-form-item>
                <el-form-item label="方法">
                    <el-input v-model="viewModel.action"></el-input>
                </el-form-item>
                <el-form-item label="账户">
                    <el-input v-model="viewModel.loginName"></el-input>
                </el-form-item>
                <el-form-item label="请求IP">
                    <el-input v-model="viewModel.ip"></el-input>
                </el-form-item>
                <el-form-item label="请求时间">
                    <el-input v-model="viewModel.executionTime"></el-input>
                </el-form-item>
                <el-form-item label="执行时间">
                    <el-input v-model="viewModel.executionDuration+'ms'"></el-input>
                </el-form-item>


                <el-form-item label="请求内容">
                    {{viewModel.parameters}}
                </el-form-item>
                <el-form-item label="返回内容">
                    {{viewModel.result}}
                </el-form-item>

            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button v-on:click="viewVisible = false">取 消</el-button>
            </span>
        </el-dialog>

    </div>
</div>

@section footer{
    <script type="text/javascript">

        new Vue({
            el: '#app',
            data: function () {
                return {
                    loading: false,
                    squeryModel: {
                        type: "",
                        keyword: ""
                    },
                    queryModel: {
                        SController: "",
                        SAction: "",
                        LoginName: "",
                        pageModel: {
                            page: 1,
                            rows: 10
                        }
                    },
                    tableChecked: [],
                    tableData: [],
                    total: 0,
                    viewVisible: false,
                    viewModel: {

                    }

                }
            },
            created() {
                var that = this;
                this.getDatas();

            },
            methods: {
                getDatas: function () {
                    var that = this;
                    that.loading = true;
                    request.post("/admin/auditinfo/query", that.queryModel).then(function (res) {
                        that.tableData = res.data.rows;
                        that.total = res.data.total;
                      
                            that.loading = false;
                    });
                },
                getMenuSelect: function () {


                },
                goBack: function () {

                },
                handleView: function (index, row) {
                    this.viewModel = row;
                    this.viewVisible = true;
                },
                handleSelectionChange: function (val) {
                    this.tableChecked = val;
                },
                handleCurrentChange: function (index) {
                    this.queryModel.pageModel.page = index;
                    this.getDatas();
                },
                handleSizeChange: function () {
                    this.getDatas();

                },
                handleSearch: function () {
                    this.getDatas();

                },
                handleDelAllSelection: function () {
                    var that = this;
                    if (this.tableChecked.length == 0) {
                        this.$message.warning("请选择要操作的项！");
                        return;
                    }

                    this.$confirm('此操作将永久删除选定项, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        var ids = [];
                        that.tableChecked.forEach(element => {
                            ids.push(element.id)
                        });
                        request.delete("/admin/auditinfo/DeleteList?ids=" + ids.join('&ids=')).then(res => {
                            that.$message.success(res.data.msg + ",删除数据" + res.data.data + "条！");
                            that.getDatas();

                        });
                    });

                },
                handleDelete: function (index, row) {
                    var that = this;
                    this.$confirm('此操作将永久删除该项, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        request.delete("/admin/auditinfo/Delete?id=" + row.id).then(function (res) {
                            that.$message.success(res.data.msg);
                            that.getDatas();
                        });

                    });

                }


            }

        });

    </script>

    }